<template>
  <div :class="['lhv8-upload-list__item', `is-${file.status}`]">
    <div class="flex align-items-center">
      <el-image :src="fileIcon" class="s18 flex align-items-center m-r-5 shrink-0" />
      {{ file.name }}
      <tag-select
        v-if="file.status === 'success'"
        :selected-tags.sync="tags"
        :quick-add="false"
        :is-label="false"
        size="small"
        class="m-l-16"
      />
      <div class="m-l-auto">
        <span v-if="file.status === 'uploading'">{{ percentage }}%</span>
        <i v-if="file.status === 'success'" class="el-icon-upload-success el-icon-circle-check"></i>
      </div>
      <div @click="$emit('remove', file)" class="el-link el-link--info m-l-5">删除</div>
    </div>
    <el-progress
      v-if="file.status === 'uploading'"
      type="line"
      :stroke-width="2"
      :show-text="false"
      :percentage="percentage"
    />
  </div>
</template>

<script>
import FileIconMixin from '@/utils/file-icon-mixin';
import { formatUploadIcon } from '@/components/spaces/resources-v2/format';
import TagSelect from '@/components/shared/TagSelect';

export default {
  name: 'uploads-list-item',
  mixins: [FileIconMixin],
  components: { TagSelect },
  props: {
    file: Object,
  },
  data() {
    return {
      tags: [],
    };
  },
  computed: {
    fileIcon() { return this[formatUploadIcon(this.file.ext)]; },
    percentage() {
      const per = parseInt(this.file.percentage, 10);
      return per === 100 ? 99 : per;
    },
  },
  watch: {
    tags(val) { this.$emit('handleTags', { [this.file.uid]: val }); },
  },
};
</script>

<style lang="scss">
.lhv8-upload-list__item {
  position: relative;
  color: #606266;
  border-radius: 4px;
  line-height: 1.5;
  cursor: pointer;
  padding: 4px 6px;

  &:first-child { margin-top: 10px; }
  &:hover {
    background-color: #f5f7fa;
    .el-icon-close.item-close { display: block; }
  }

  &.is-success .el-icon-upload-success { display: block; }
  .el-icon-upload-success { color: #67c23a; }
  .el-icon-close.item-close {
    display: none;
    color: #606266;
  }
  .el-progress {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>
